<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>登录</span>
      </div>
    </template>
    <div>
      <el-form :model="adminsForm" label-width="80px">
        <el-form-item label="登录编码">
          <el-input v-model="adminsForm.adminCode" placeholder="登录编码"/>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="adminsForm.password" show-password placeholder="登录密码"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup>
import { inject, reactive } from "vue";
import { ElMessage } from "element-plus";
import { setSessionStorage } from "../common.js";
import { useRouter } from 'vue-router';

const myElMessage = inject('myElMessage');
const axios = inject('axios');
const router = useRouter();

// do not use same name with ref
const adminsForm = reactive({
  adminCode: "",
  password: "",
});

const login = () => {
  //表单验证
  if(adminsForm.adminCode==''){
    myElMessage('登录编码不能为空！','warning');
    return;
  }
  if(adminsForm.password==''){
    myElMessage('登录密码不能为空！','warning');
    return;
  }

  axios
    .post("admins/getAdminsByCodeByPass", adminsForm)
    .then((response)=>{
      if(response.data!=''){
        setSessionStorage('admins',response.data);
        router.push('/index');
      }else{
        myElMessage('登录编码或密码不正确','error');
      }
    })
    .catch((error)=>{
      console.log(error);
    });
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 400px;
  margin: 0 auto;
  margin-top: 150px;
}
</style>